<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" :count="'￥'+ this.infoList.salesTotal">
            <template slot="chart">
              <span>
                月同比&nbsp;{{this.infoList.salesGrowthLastMonth}}%
                <svg
                  t="1652688742231"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3369"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z"
                    fill="#1afa29"
                    p-id="3370"
                  />
                </svg>
              </span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>
                日同比&nbsp;{{this.infoList.salesGrowthLastDay}}%
                <svg
                  t="1652688778696"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4343"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z"
                    fill="#d81e06"
                    p-id="4344"
                  />
                </svg>
              </span>
            </template>
            <template slot="footer">
              <span>日销售额&nbsp;&nbsp;￥{{this.infoList.salesToday}}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" :count="this.infoList.visitTotal">
            <template slot="chart">
              <LineCharts></LineCharts>
            </template>
            <template slot="footer">
              <span>日访问量 {{this.infoList.visitToday}}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" :count="this.infoList.payTotal">
            <template slot="chart">
              <BarCharts></BarCharts>
            </template>
            <template slot="footer">转化率 {{this.infoList.payRate}}%</template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" :count="this.infoList.activityRate + '%'">
            <template slot="chart">
              <ProgressCharts></ProgressCharts>
            </template>
            <template slot="footer">
              <span>
                月同比&nbsp;{{this.infoList.activityGrowthLastMonth}}%
                <svg
                  t="1652688742231"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3369"
                  width="16"
                  height="12"
                >
                  <path
                    d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z"
                    fill="#1afa29"
                    p-id="3370"
                  />
                </svg>
              </span>
              &nbsp;&nbsp;
              <span>
                日同比&nbsp;{{this.infoList.activityGrowthLastDay}}%
                <svg
                  t="1652688778696"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4343"
                  width="16"
                  height="12"
                >
                  <path
                    d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z"
                    fill="#d81e06"
                    p-id="4344"
                  />
                </svg>
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import LineCharts from './LineCharts'
import BarCharts from './BarCharts'
import ProgressCharts from './ProgressCharts'
import {mapState} from 'vuex'
export default {
  name: 'Card',
  components: {
    Detail,
    LineCharts,
    BarCharts,
    ProgressCharts,
  },
  computed: {
    ...mapState({
      infoList: state => state.home.homeData
    })
  }

}
</script>

<style scoped>
</style>